/* .wide {
    border: 1px solid red;
} */

.med {
    display: flex;
    justify-content: center;
}

.med >div:nth-child(1){
    /* border: 1px solid black; */
    width: 1500px;
}

/* 设置两大容器的背景图片与尺寸 */
.med > div:nth-child(1) >div:nth-child(1){
    margin-top: -150px;
    width: 1500px;
    height: 500px;
    background-image: url('../img/3_fhea.png');
    /* border: 1px solid red; */
    background-size: 100% 100%;
}

.med > div:nth-child(1) >div:nth-child(3){
    width: 1500px;
    height: 300px;
    background-image: url('../img/2_zequ.jpg');
    /* border: 1px solid black; */
    background-size: 100% 100%;
    display: flex;
    justify-content: center;

}
/* ------------------------公司简介-------------------------------- */
.cminfo {
    color: green;
    width: 1500px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 设置第一个容器下 */
.cminfo > div:nth-child(1){
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* border: 1px solid black; */
}

/* 设置第一个容器的图片大小 */
.cminfo > div:nth-child(1) >div:nth-child(1) > div:nth-child(2) {
    width: 320px;
    height: 140px;
    /* border: 1px solid red; */
}

/* 设置第一个容器的图片大小 */
.cminfo > div:nth-child(1) >div:nth-child(1) > div:nth-child(2) img{
    width: 100%;
    height: 100%;
}

/* 设置第一个容器的标题样式 */
.cminfo > div:nth-child(1) >div:nth-child(1) > div:nth-child(1) {
    text-align: left;
}


/* 设置第一个容器的标题的字体 */
.title {
    color: green;
    font-size: 40px;
}

.cminfo > div:nth-child(1) >div:nth-child(1){
    /* border: 1px solid red; */
    margin-right: 60px;
}

/* 设置公司简介的详情尺寸以及多行溢出 */
.cminfo > div:nth-child(1) >div:nth-child(2)>div:nth-child(1) {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size:20px ;
}

/* 详情靠右 */
.cminfo > div:nth-child(1)>div:nth-child(2)>div:nth-child(2){
    display: flex;
    justify-content: flex-end;
}


/* 详情中的详情添加背景图片 */
.cminfo > div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1){
    background-image: url('../img/11_r1jc.png');
    width: 100px;
    height: 20px;
    background-size: 100% 100%;
    color: white;
    padding-left: 50px;
    padding-top: 5px ;
    padding-bottom: 10px ;
    cursor: pointer;

}

/* ----------------------------新闻动态-------------------------------------- */


/*  设置包裹整个新闻动态的div布局*/
.cmnews {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

/* 设置包裹整个新闻动态的div尺寸 */
.cmnews > div:nth-child(1){
    width: 1200px;
    /* border: 1px solid green; */
}

/* 为除标题“新闻动态”以外的三大组成部分加框以及设置宽度 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div{
    width: 320px;
    /* border: 1px solid black; */
}

/* -------------第一部分-------------- */

/* 设置三大组成部分的第一部分局部 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(1){
    margin-right: 60px;
    display: flex;
    flex-direction: column;
}

/* 设置三大组成部分的第一部分包裹图片的div */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) >div:nth-child(1) {
    width: 320px;
}

/*  设置三大组成部分的第一部分图片的布局 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) >div:nth-child(1) img{
    width: 100%;
    height: 100%;
}

/* 设置三大组成部分的第一部分的文字内容布局 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) >div:nth-child(2){
    display: flex;
    justify-content: space-between;
}

/* 设置三大组成部分的第一部分的左边文字颜色与字号 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) >div:nth-child(2)>div:nth-child(1){
    color: green;
    font-size: 25px;
}

/* 设置三大组成部分的第一部分的左边文字中上边部分文字的粗细 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) >div:nth-child(2)>div:nth-child(1)>div:nth-child(1){
    font-weight: bold;
}


/* 设置三大组成部分的第一部分的中间文字颜色与字号与背景图片与尺寸 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) >div:nth-child(2)>div:nth-child(2){
    color: white;
    background-image: url('../img/11_r1jc.png');
    font-size: 12px;
    height: 45px;
    width: 200px;
    background-size: 100% 100%;
    padding-top: 20px;
    padding-left: 55px;
}


/* ---------------第二部分------------------ */

/* 设置三大组成部分的第二部分局部 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(2){
    margin-right: 60px;
    display: flex;
    flex-direction: column;
    margin-left: 60px;
}

/* 设置三大组成部分的第二部分包裹图片的div */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) >div:nth-child(1) {
    width: 320px;
}

/*  设置三大组成部分的第二部分图片的布局 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) >div:nth-child(1) img{
    width: 100%;
    height: 100%;
}

/* 设置三大组成部分的第二部分的文字内容布局 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) >div:nth-child(2){
    display: flex;
    justify-content: space-between;
}

/* 设置三大组成部分的第二部分的左边文字颜色与字号 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) >div:nth-child(2)>div:nth-child(1){
    color: green;
    font-size: 25px;
}

/* 设置三大组成部分的第二部分的左边文字中上边部分文字的粗细 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) >div:nth-child(2)>div:nth-child(1)>div:nth-child(1){
    font-weight: bold;
}

/* 设置三大组成部分的第二部分的中间文字颜色与字号与背景图片与尺寸 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) >div:nth-child(2)>div:nth-child(2){
    color: white;
    background-image: url('../img/11_r1jc.png');
    font-size: 12px;
    height: 45px;
    width: 200px;
    background-size: 100% 100%;
    padding-top: 20px;
    padding-left: 55px;
}

/* 第三部分 */
/* 设置文字布局 */
.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(3){
    display: flex;
    flex-direction: column;
    font-size: 50px;
    justify-content: space-between;
    margin-left: 60px;
    color: gainsboro;
}

.cmnews > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) >div{
    /* border: 1px solid red; */
    width: 60px;
    cursor: pointer;
}


/* 设置新闻动态的三个div */
.cmnews > div:nth-child(1) > div:nth-child(2) {
    display: flex;
    /* justify-content: space-around; */
}

/* -----------------------产品展示标题------------------------------------------------ */
.med > div:nth-child(1) >div:nth-child(2){

    width: 1350px;
    padding-left: 150px;
}


/* ----------------------------产品展示--------------------------------------------- */



/* 为产品展示下的两个div设置布局 */
.display {
    display: flex;
    width: 1200px;
}

/* 为产品展示下的两个div设置边框 */
.display >div {
    /* border: 1px solid red; */
}

/* 为产品展示下第一个div设置布局 */
.display >div:nth-child(1) {
    margin-top: 20px;
    margin-right: 100px;
    /* margin-left: 50px; */
}

/* 为产品展示下的第一个div下包裹img的div设置尺寸 */
.display >div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
    display: flex;
    width: 500px;
    height: 250px;
    /* 轮播展示 */
    animation: move 4s linear 0s infinite normal
}

/* 为产品展示下的第一个div下的img设置填充 */
.display >div:nth-child(1) > div:nth-child(1) > div:nth-child(1) img {
    width: 100%;
    height: 100%;
}

/* 为产品展示下的第二个div设置背景图片 */
.display >div:nth-child(1) > div:nth-child(2) {
    background-image: url('../img/17_5svj.png');
    color: white;
    width: 150px;
    margin-left: 250px;
    padding-left: 100px;
    background-size: 100% 100%;
}

/* --------------------------轮播图-------------------------------- */

/* 设置包裹轮播图的div的尺寸 */
.display >div:nth-child(1) > div:nth-child(1){
    overflow: hidden;
    width: 500px;
}

/* 定义动画 */
@keyframes move{
    from{
        margin-left: 0;
    }
    to{
        margin-left: -600px;
    }
}

/* -----------------------------科学技术本质--------------------------------------- */
/* 设置整体字体颜色 */
.display > div:nth-child(2){
    color: gray;
}

/* 设置科学技术本质标题字体大小和样式 */
.display > div:nth-child(2) >div:nth-child(1){
    font-size: 25px;
    margin-bottom: 20px;
}


/* 为产品展示下第二个div尺寸 */
.display >div:nth-child(2) {
   width: 600px;
}

/* 科学技术本质内容尺寸设置 */
.display > div:nth-child(2) >div:nth-child(2) {
    width: 500px;
}


/* 详情向右对齐 */
.display > div:nth-child(2) >div:nth-child(3){
    display: flex;
    justify-content: flex-end;
}

/* 设置详情的背景图片 */
.display > div:nth-child(2) >div:nth-child(3) > div:nth-child(1){
    background-image: url('../img/11_r1jc.png');
    width: 60px;
    height: 35px;
    background-size: 100% 100%;
    padding-left: 30px;
    padding-top: 10px;
    color: white;
    cursor: pointer;
}
